import styled from "styled-components";

export const Container = styled.div`
    background-color:#f2f3f4;

    .containerbox{
        margin-left:1rem;    
    }
    .title{
        margin:1rem;
        font-size:1.2rem;
        font-weight:700
    }
    /* .cards{
        width:100%;
        display:flex;
        display: -webkit-flex;
        -webkit-flex-wrap:nowrap;
        flex-wrap:nowrap;
        overflow-x:scroll;
        border-bottom:2px solid #585a5e;
    } */
    /* .cardItem{
        width:7.8rem;
        margin:0 0 0 1rem;
    } */
    .swiper-container1 {
        width: 100%;
        height: 100%;
        border-bottom:2px solid #6e6e6e;
    }
    .swiper-slide1 {
        text-align: center;
        font-size: 18px;
        background:#f2f3f4;
        /* Center slide text vertically */
        display: flex;
        flex-direction:column;
        width:20rem;
        align-items:start;
        justify-content:start;
    }
    .ImagBox{
        width:100%;
        /* height:150px; */
        img{
            width:100%
        }
    }
    .cardTitle{
        font-size:.9rem;
        width:100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight:700;
        margin-top:0.5rem;
    }
    .cardDesc{
        font-size:.9rem;
        margin-top:0.5rem;
        margin-bottom:1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cardPrice{
        font-size:.9rem;
        font-weight:700;
        margin-bottom:1rem
        /* padding-bottom:3rem */
    }
`